<script type='text/javascript' language='javascript'>
$(document).ready(function(){
    /**
     * Verifica se existe mensagem de erro de validação
     */
    if(!$(".erro")[0]){
        scroll_to('#content_relatorio');
    }

    /** exportar relatório **/
    $("#print").click(function(){

    });

    /**
     * fecha charts
     */
    $('#bt_cancel').click(function(){
        reset_form();
    });
    
    function reset_form() {
        $("#relatorio_form")[0].reset();
        $("#content_relatorio").fadeOut();
        $("#tipo_relatorio option:first").attr('selected','selected');
        $("#tipo_grafico option:first").attr('selected','selected');
        $("#rotulo").attr('checked', false); 
        scroll_to('#page-content'); 
    }

    /** Seleção dos ANOS **/
    $( "#selectable_ano" ).selectable({
        stop: function() {
            var ids = new Array();
            $('#ano_relatorio').val("");
            $( ".ui-selected", this ).each(function() {
                ids.push($(this).val());
                $('#ano_relatorio').val(ids.join(', ')); // joga os ids para o input
            });
        },
        //Seleciona os itens já escolhidos
        create: function(event, ui) {
            var ids = $('#ano_relatorio').val().split(',');
            $('#selectable_ano .list_select').each(function(index){
                for(var i = 0; i <= ids.length; i++){
                    if( $( this ).val() == ids[i]){
                        $( this ).addClass('ui-selected');
                    }
                }
            });
        }
    });
    
    /** Seleção dos MESES **/
    $( "#selectable_mes" ).selectable({
        stop: function() {
            var ids = new Array();
            $('#mes_relatorio').val("");
            $( ".ui-selected", this ).each(function() {
                ids.push($(this).val());
                $('#mes_relatorio').val(ids.toString()); // joga os ids para o input
            });
        },
        //Seleciona os itens já escolhidos
        create: function(event, ui) {
            var ids = $('#mes_relatorio').val().split(',');
            $('#selectable_mes .list_select').each(function(index){
                for(var i = 0; i <= ids.length; i++){
                    if( $( this ).val() == ids[i]){
                        $( this ).addClass('ui-selected');
                    }
                }
            });
        }
    });
});

//function verifica_condicoes() {
//    if($("#tipo_relatorio").val() == 4 || $("#tipo_relatorio").val() == 5){ // Igual ao relatorio de usuario
//        $('.list_meses').hide();
//    }else {
//        $('.list_meses').show();
//    }
//}
</script>
<article>
    <div>
        <section>
            <form action="<?php echo site_url('relatorio/map_relatorio'); ?>" id="relatorio_form" method="post" accept-charset="utf-8">
                <fieldset>
                    <div>
                        <input type="hidden" name="codigo" id="codigo">
                        <span>
                            <label class="one_label">
                                <p>Tipo de relatório*:</p>
                            </label>
                            <?php echo form_dropdown('tipo_relatorio', $tipos_relatorios, set_value('tipo_relatorio'), 'id="tipo_relatorio" class="drop_medio"') ?>&nbsp;&nbsp;
                            <?php echo form_dropdown('tipo_grafico', $tipos_graficos, set_value('tipo_grafico'), 'id="tipo_grafico" class="drop_min"') ?>&nbsp;&nbsp;
                            <span class="check_text"><input type="checkbox" name="rotulo" id="rotulo" value="1" <?php echo set_checkbox('rotulo', 1); ?> /> <b>Mostrar rótulos?</b></span>
                        </span><br /><br />
                        <span class="list_anos">
                            <label class="one_label">Ano*:</label>
                            <input id="ano_relatorio" name="ano_relatorio" type="hidden" value="<?php echo set_value('ano_relatorio', 0); ?>"/>
                            <div class="list_selectable">
                                <ol id="selectable_ano" class="selectable_list">
                                    <?php foreach ($anos as $ano): ?>
                                        <li class="list_select pointer" value="<?php echo $ano; ?>"><?php echo $ano; ?></li>
                                    <?php endforeach; ?>
                                </ol>
                            </div><br />
                        </span>

                        <span class="list_meses">
                            <label class="one_label">Mês*:</label>
                            <input id="mes_relatorio" name="mes_relatorio" type="hidden" value="<?php echo set_value('mes_relatorio', 0); ?>"/>                        
                            <div class="list_selectable">
                                <ol id="selectable_mes" class="selectable_list">
                                    <?php foreach ($meses as $key => $mes): ?>
                                        <li class="list_select pointer" value="<?php echo $key; ?>"><?php echo $mes; ?></li>
                                    <?php endforeach; ?>
                                </ol>
                            </div><br />
                        </span>
                        <input type="submit" value="Gerar relatório" id="bt_submit" class="button">&nbsp;
                        <a id="bt_cancel" class="button pointer">Cancelar</a>
                    </div>
                </fieldset>
            </form>
        </section>
    </div> <!-- END of #main-content-datagrid -->
</article>
<div>
    <section id="content_relatorio">
        <div class="content_chart">
            <?php echo isset($chart) ? $chart : ''; ?>
            <div class="infor_chart">
                <?php echo isset($infor_chart) ? $infor_chart : ''; ?>    
            </div>
        </div>
    </section>
</div> <!-- END of #main-content-datagrid -->
